<template>
  <div class="indoorMark-container">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="layeredGraph-title">选择单位</div>
        <el-form
          :inline="true"
          ref="indoorOrg"
          :model="indoorOrg"
          @submit.native.prevent
        >
          <el-form-item style="width: 100%;">
            <el-select
              filterable
              style="width: 100%;"
              v-model="indoorOrg.organizationId"
              @change="(fengMapObj.build = 0), changeUnit()"
            >
              <el-option
                v-for="item in indoorOrg.data"
                :key="item.organizationId"
                :label="item.shortName"
                :value="item.organizationId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="layeredGraph-title">建筑物结构</div>
        <el-input placeholder="输入关键字搜索" v-model="filterText"></el-input>
        <el-tree
          ref="tree"
          class="filter-tree"
          v-loading="buildObj.loading"
          node-key="id"
          :data="buildObj.data"
          :props="buildObj.props"
          :filter-node-method="filterNode"
          :highlight-current="true"
          :expand-on-click-node="false"
          :default-expanded-keys="[1]"
          @node-click="clickLevel"
        >
        </el-tree>
      </el-col>
      <el-col :span="13">
        <div class="layeredGraph-title is-flex">
          <div style="flex:1;">{{ fengMapObj.tittle }}</div>
          <span>显示标注物：</span>
          <el-tooltip
            class="item"
            effect="dark"
            :content="showMarksFlag ? '标注物已显示' : '标注物已隐藏'"
          >
            <el-switch
              v-model="showMarksFlag"
              @change="showhideMarks"
            ></el-switch>
          </el-tooltip>
          <span :style="{ visibility:showMarksFlag?'visible':'hidden' }" style="margin-left:20px;">显示设备名称：</span>
          <el-tooltip
            class="item"
            effect="dark"
            :content="showDeviceNameFlag ? '设备名称已显示' : '设备名称已隐藏'"
          >
            <el-switch
               :style="{ visibility:showMarksFlag?'visible':'hidden' }"
              v-model="showDeviceNameFlag"
              @change="showDeviceNameChange"
            ></el-switch>
          </el-tooltip>
        </div>
        <div class="indoor-map">
          <div
            ref="fengMap"
            id="fengMap"
            :loading="fengMapObj.loading"
            :style="{
              width: 100 + '%',
              height: fengMapObj.height + 'px'
            }"
          ></div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="layeredGraph-title">
          标注列表（共{{
            markAllData.filter(
              data =>
                (!searchForm.name ||
                  data.name
                    .toLowerCase()
                    .includes(searchForm.name.toLowerCase())) &&
                (!searchForm.typeId || data.type == searchForm.typeId)
            ).length
          }}个）
        </div>
        <el-form
          class="serach-form"
          ref="searchForm"
          :model="searchForm"
          @submit.native.prevent
        >
          <el-form-item>
            <el-input
              v-model="searchForm.name"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <tree-select
              placeholder="请选择标注关联类型"
              v-model="searchForm.typeId"
              filterable
              :width="271"
              :data="typeList"
              :defaultProps="typeDefaultProps"
              :nodeKey="typeNodeKey"
            >
            </tree-select>
          </el-form-item>
        </el-form>
        <div
          class="relate-eq"
          :style="{
            width: 100 + '%',
            height: fengMapObj.height + 'px'
          }"
        >
          <el-table
            v-loading="indoorTable.loading"
            :data="
              markAllData.filter(
                data =>
                  (!searchForm.name ||
                    data.name
                      .toLowerCase()
                      .includes(searchForm.name.toLowerCase())) &&
                  (!searchForm.typeId || data.type == searchForm.typeId)
              )
            "
            ref="indoorTable"
          >
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="props">
                <el-button
                  type="text"
                  size="small"
                  @click="fixPosition(props.row)"
                  >定位</el-button
                >
                <span class="dividing-line">|</span>
                <el-button
                  type="text"
                  size="small"
                  @click="deleteMark(props.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="layeredGraph-title">{{ fengMapObj.indooTypeName }}</div>
        <el-collapse accordion>
          <el-collapse-item
            v-for="item in mark.groups"
            :title="item.tittle"
            :key="item.id"
          >
            <el-radio
              class="mark-tool"
              v-for="val in item.node"
              v-model="currentMark.modelId"
              :key="val.id"
              :label="val.id"
              :icon="val.icon"
              @change="changeMarkType(val.id, val.icon, item.dictKey, val.name)"
              >{{ val.name }}
            </el-radio>
          </el-collapse-item>
        </el-collapse>
        <div class="layeredGraph-title is-required">标注名称</div>
        <el-input
          v-model="currentMark.name"
          placeholder="请输入标注名称"
        ></el-input>
        <div class="layeredGraph-title">关联对象</div>
        <el-select
          v-model="relateEq.value"
          v-show="currentMark.id != 2"
          placeholder="请选择关联对象"
          filterable
          :filter-method="getFcfSelectList"
          :loading="relateEq.loading"
          @change="relateEqChange"
          id="relateEqFcf"
        >
          <el-option value="">请选择关联对象</el-option>
          <el-option
            v-for="item in relateEq.data"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="relateEq.pageIndex"
            small
            layout="total, prev, pager, next"
            :total="relateEq.total"
          >
          </el-pagination>
        </el-select>
        <tree-select
          v-show="currentMark.id === 2"
          placeholder="请选择关联对象"
          v-model="relateBuildId"
          filterable
          :width="193"
          :data="relateBuildList"
          :defaultProps="relateBuildDefaultProps"
          :nodeKey="relateBuildNodeKey"
          @node-click="handleNodeClick"
        >
        </tree-select>

        <el-button
          type="primary"
          style="float: right;margin-top: 10px;"
          @click="quitSaveIndoorMark()"
          >保存</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
import loadFengmap from "@/libs/fmap/loadFengmap.js";
let fengMap = null;
import TreeSelect from "@/libs/TreeSelect/Main";
import {
  getIndoorInfo,
  getIndoorInfoByOrg,
  getDictByCode,
  getFcfSelectList,
  getAListForPc,
  updateMarkers,
  getMarkers,
  delMarkers,
  getRelationInfo
} from "@/api/indoor";
import { getOrgList } from "@/api/org";
import { getFbsTree } from "@/api/sysConfig";

export default {
  name: "IndoorMark",
  components: {
    TreeSelect
  },
  data() {
    return {
      showMarksFlag: true,
      indoorOrg: {
        data: [],
        organizationId: ""
      },
      filterText: "",
      buildObj: {
        data: [],
        organizationId: 0,
        loading: false,
        buildId: 0,
        props: {
          children: "nodes",
          label: "text",
          value: "id"
        }
      },
      // firstLayer:null,
      // firstAllLayer:null,
      // saveAllMark:[],
      imgSizeRate: 32, //图片大小缓存
      fengMapObj: {
        tittle: "室内地图",
        loading: false,
        indooTypeName: "室内地图标注关联类型",
        organizationId: 0,
        data: {},
        indoorId: "",
        height: top.window.document.body.clientHeight - 160,
        build: "",
        code57: []
      },
      mark: {
        groups: [],
        markClickType: ""
      },
      currentMark: {
        modelId: "",
        id: "",
        type: "",
        name: "",
        icon: "",
      },
      relateEq: {
        loading: false,
        value: "",
        pageIndex: 1,
        total: 0,
        data: []
      },
      fullLoading: false,
      searchForm: {
        name: "", // 搜索名称
        typeId: "" // 标注关联类型
      },
      typeList: [
        {
          id: "",
          name: "全部类别"
        }
      ],
      typeDefaultProps: {
        children: "node",
        label: "name",
        value: "id"
      },
      typeNodeKey: "id",
      relateBuildList: [], // 关联建筑物数据（当标注类型为建筑物时才用到）
      relateBuildDefaultProps: {
        children: "nodes",
        label: "text",
        value: "id"
      },
      relateBuildNodeKey: "id",
      relateBuildId: "", // 关联建筑物id （当标注类型为建筑物时才用到）
      markAllData: [], //标注列表
      isStartMark: false,
      indoorTable: {
        loading: false,
        data: []
      },
      treeParentId: 0,
      isGroupClick: false,
      groupValue: {}, //点击建筑物数据
      isUnitMap: true,
      indoorId: "",
      showDeviceNameFlag:true
    };
  },
  watch: {
    //建筑物搜索
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    showDeviceNameFlag(val){

    }
  },
  created() {
    let self = this;
    this.markerLayer=[]
    this.markerAllLayer=[]
    self.bindOwnerUnit();
    self.getMarkType();
  },
  methods: {
    showDeviceNameChange(val){
      if(val){
        this.showAllTextMark()
      }else{
        this.cleanAllTextMark()
      }
    },
    // 建筑树的筛选
    filterNode(value, data, node) {
      if (!value) {
        return true;
      }
      let level = node.level;
      let _array = []; //这里使用数组存储 只是为了存储值。
      this.getReturnNode(node, _array, value);
      let result = false;
      _array.forEach(item => {
        result = result || item;
      });
      return result;
    },
    getReturnNode(node, _array, value) {
      let isPass =
        node.data && node.data.text && node.data.text.indexOf(value) !== -1;
      isPass ? _array.push(isPass) : "";
      // this.index++;
      // console.log(this.index)
      if (!isPass && node.level != 1 && node.parent) {
        this.getReturnNode(node.parent, _array, value);
      }
    },
    //获取标注点类型
    getMarkType() {
      let self = this;
      getDictByCode({ code: 58 }).then(data => {
        if (data) {
          // self.fengMapObj.indooTypeName = data.data.name;
          if (data.data.dictValueObj.length > 0) {
            for (let i = 0; i < data.data.dictValueObj.length; i++) {
              let obj = {};
              obj.id = data.data.dictValueObj[i].id;
              obj.tittle = data.data.dictValueObj[i].dictValue;
              obj.name = data.data.dictValueObj[i].dictValue;
              obj.dictKey = data.data.dictValueObj[i].dictKey;
              obj.node = [];
              self.mark.groups.push(obj);
            }
            getDictByCode({ code: 57 }).then(res => {
              if (res) {
                let resulte = res.data.dictValueObj[0];
                let dealResult = JSON.parse(resulte.dictValue);
                self.fengMapObj.code57 = dealResult;
                for (let j = 0; j < self.mark.groups.length; j++) {
                  for (let m = 0; m < dealResult.length; m++) {
                    if (
                      self.mark.groups[j].dictKey == dealResult[m].relationType
                    ) {
                      let obj2 = {};
                      obj2.id = dealResult[m].id;
                      obj2.name = dealResult[m].name;
                      obj2.icon = dealResult[m].icon;
                      self.mark.groups[j].node.push(obj2);
                    }
                  }
                }
                self.typeList = self.typeList.concat(self.mark.groups);
              }
            });
          }
        }
      });
    },
    //业主单位
    bindOwnerUnit: function() {
      let self = this;
      getOrgList({ queryType: 0 }).then(data => {
        if (data.data.length > 0) {
          self.indoorOrg.organizationId = data.data[0].organizationId;
          self.changeUnit();
        }
        self.indoorOrg.data = data.data;
      });
    },
    //切换业主单位
    changeUnit() {
      let self = this;
      self.isUnitMap = true;
      self.filterText = "";
      self.markAllData = [];
      self.buildObj.organizationId = self.indoorOrg.organizationId;
      /* if (this.$refs.fengMap.children.length > 0) {
        this.$refs.fengMap.firstElementChild.remove();
      } */
      // 释放蜂鸟地图内存
      self.disposeMap();
      if (self.currentMark.id != 2) {
        // 重新获取关联对象
        self.getFcfSelectList();
      } else {
        // 获取关联建筑物
        self.getRelateBuildList();
      }
      self.getFengMapData();
      self.getTreeData();
    },
    //初始化单位的标注
    initUnitMap() {
      let self = this;
      self.showMarker();
      //展示标注点
      // setTimeout(function(){
      // 	self.showAllMark();
      // },1000);
    },
    //建筑物数据
    getTreeData() {
      let self = this;
      self.buildObj.loading = true;
      getFbsTree({
        organizationId: self.indoorOrg.organizationId,
        buildId: self.buildObj.buildId
      }).then(data => {
        if (data.status == 200) {
          self.buildObj.data = data.data;
        }
        self.buildObj.loading = false;
      });
    },
    handleCurrentChange(currentpage) {
      let self = this;
      self.relateEq.pageIndex = currentpage;
      self.getFcfSelectList($("#relateEqFcf").val(), true);
    },
    /*获取关联物联设备*/
    getFcfSelectList(name, pageChange) {
      let self = this;
      // 重新搜索时页码复原
      if (!pageChange) {
        this.relateEq.pageIndex = 1;
      }
      if (self.currentMark.id) {
        self.relateEq.loading = true;
        let parames = {
          queryType: 1,
          orgId: self.indoorOrg.organizationId,
          fbsId: self.fengMapObj.build || 0,
          type: self.currentMark.id || "",
          name: name || "",
          pageIndex: self.relateEq.pageIndex - 1,
          pageSize: 10
        };
        getRelationInfo(parames).then(data => {
          //vr
          if (self.currentMark.id == 30) {
            data.data.forEach(item => {
              item.id = item.remark;
            });
          }
          self.relateEq.data = data.data;
          self.relateEq.total = data.total;
          self.relateEq.loading = false;
        });
      }
    },
    relateEqChange(val) {
      let obj = {};
      obj = this.relateEq.data.find(item => {
        return item.id === val;
      });
      this.currentMark.name = obj ? obj.name : "";
    },
    // 获取关联建筑物数据
    getRelateBuildList() {
      let self = this;
      self.relateBuildId = "";
      getFbsTree({
        organizationId: self.indoorOrg.organizationId,
        buildId: self.fengMapObj.build || self.buildObj.buildId
      }).then(data => {
        if (data.status == 200) {
          self.relateBuildList = data.data;
        }
      });
    },
    handleNodeClick(obj, node, item) {
      let nameStr = obj.text;
      let nameSum = ele => {
        if (ele.parent.level > 1) {
          nameStr = ele.parent.data.text + ">" + nameStr;
          nameSum(ele.parent);
        }
      };
      // 计算中文名称
      nameSum(node);
      this.currentMark.name = nameStr;
    },
    //建筑物点击事件
    clickLevel(value) {
      let self = this;
      self.isUnitMap = false;
      self.isGroupClick = true;
      self.groupValue = value;
      self.fengMapObj.build = self.groupValue.id;
      self.fengMapObj.indoorId = self.groupValue.indoorId;
      self.currentMark.name = "";
      self.relateEq.value = "";
      if (self.currentMark.id != 2) {
        // 重新获取关联对象
        self.getFcfSelectList();
      } else {
        // 获取关联建筑物
        self.getRelateBuildList();
      }
      getIndoorInfo({
        bizId: value.id,
        type: 2
      }).then(res => {
        self.markAllData = [];
        const indoorInfo = res.data
        if (!indoorInfo) {
          self.fengMapObj.tittle = value.text;
          self.fengMapObj.indoorId = "";
          self.fengMapObj.build = value.id;
          // self.saveAllMark = []
          //隐藏所有楼层
          fengMap.visibleGroupIDs = []
          self.$message({
            message: "当前单位未配置室内地图",
            type: "warning"
          });
          self.isGroupClick = false;
          self.fullLoading.close();
          return;
        }
        /* if(self.$refs.fengMap.children.length > 0){
        	self.$refs.fengMap.firstElementChild.remove();
        } */
        if (indoorInfo.fmapId !== self.fengMapObj.data.fmapId) {
          self.disposeMap();
          self.fengMapObj.data = indoorInfo;
          self.initFengMap();
        } else {
          self.fengMapObj.data = indoorInfo;
          self.showFengGroupMap();
        }
      });
    },
    //显示分层地图
    showFengGroupMap() {
      let self = this;
      self.isGroupClick = false;
      let value = self.groupValue;
      self.groupValue = {};
      // 清除标记点
      self.cleanAllMark();

      self.fengMapObj.tittle = value.text;
      self.fengMapObj.indoorId = value.indoorId * 1;
      self.fengMapObj.build = value.id;
      //楼层
      if (value.indoorId) {
        self.treeParentId = value.parentId;
        //获取标注点数据
        self.showMarker();
        //隐藏所有楼层，展示对应楼层
        fengMap.visibleGroupIDs = [value.indoorId * 1]
        fengMap.focusGroupID = value.indoorId * 1; //设置聚焦楼层
        fengMap.mapScaleLevel = 20;

        return;
      }
      //楼栋 设置所有楼层可见
      self.showMarker();
      fengMap.visibleGroupIDs = fengMap.groupIDs;
      fengMap.tiltAngle = 30;
    },
    //获取蜂鸟图数据
    getFengMapData(indoorId) {
      let self = this;
      self.fullLoading = self.$loading({
        lock: true,
        text: "地图加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getIndoorInfo({
        bizId: self.indoorOrg.organizationId,
        type: 1
      }).then(data => {
        if (data.data) {
          self.fengMapObj.data = data.data;
          self.initFengMap();
        } else {
          self.fengMapObj.data = {};
          self.$message({
            message: "当前单位未配置室内地图",
            type: "warning"
          });
          self.fullLoading.close();
        }
      });
    },
    //初始化蜂鸟图数据
    initFengMap(option, callback) {
      loadFengmap()
        .then(() => {
          this.createMap(option, callback);
        })
        .catch(err => {
          console.error("地图加载失败");
        });
    },
    createMap(option, callback) {
      let that = this;
      fengMap = new fengmap.FMMap({
        // 渲染dom
        container: document.getElementById("fengMap"),
        // 地图数据位置
        mapServerURL:
          REMOTESTATICPATH + "fmap/data/" + that.fengMapObj.data.fmapId,
        // 主题数据位置
        mapThemeURL: REMOTESTATICPATH + that.fengMapObj.data.topicUrl,
        // fullScreen:true,
        // 默认比例尺级别设置为20级
        defaultMapScaleLevel: that.fengMapObj.data.scaleLevel,
        // [16, 23], 比例尺级别范围， 16级到23级
        //mapScaleLevelRange: [15, 23],
        //两楼层间的高度
        // defaultGroupSpace: 5,
        // 关闭聚焦层切换的动画显示
        // focusAnimateMode: true,
        // defaultBackgroundColor: "#fff",
        defaultThemeName: that.fengMapObj.data.topicName,
        //支持单击模型高亮，false为单击时模型不高亮
        modelSelectedEffect: true,
        focusAlphaMode: false,
        // 设置最大倾斜角
        //defaultMaxTiltAngle : 40,
        // 设置倾斜角，默认倾斜角为60度
        // defaultTiltAngle : 30,
        // 开发者申请应用下web服务的key
        // key : '57c7f309aca507497d028a9c00207cf8',
        // 开发者申请应用名称
        // appName : '室内研发SDK_2_0',
        key: that.fengMapObj.data.appKey,
        appName: that.fengMapObj.data.appName
      });
      // fengMap.mapScaleLevel = 18;
      // 打开Fengmap服务器的地图数据和主题
      fengMap.openMapById(that.fengMapObj.data.fmapId);

      // 地图加载完回调事件
      fengMap.on("loadComplete", function() {
        // map.themeName='967110';
        //map.viewMode = fengmap.FMViewMode.MODE_2D;
        // 默认楼层加载完后不显示，需自定义设置要显示的楼层和聚焦层

        // 设置透明
        fengMap.setBackgroundColor("#ffffff", 0);
        //地图手势对象
        var controller = fengMap.gestureEnableController;
        controller.enableMapPan = true; // 可移动
        controller.enableMapRotate = true; // 可旋转
        controller.enableMapIncline = true; //可倾斜
        controller.enableMapPinch = true; //可缩放
        // controller.enableMapSingleTap = false; //不可单击


        // 设置透明
        fengMap.setBackgroundColor("#ffffff", 0);
        // map.setBackgroundColor(0,0);

        fengMap.groupSpace = 80;

        if (fengMap.fmapID == "njtlzhxf") {
          fengMap.mapScale = 210;
        }

        //设置所有楼层可见
        fengMap.visibleGroupIDs = fengMap.groupIDs;
        fengMap.focusGroupID = fengMap.groupIDs[0];

        
        if(that.fengMapObj.data.maxTilt){
          let maxTilt=JSON.parse(that.fengMapObj.data.maxTilt)
          //中心点
          let pnt = {
              x: maxTilt.x * 1,
              y: maxTilt.y * 1,
              groupID: maxTilt.groupID * 1
          };
          //跳转
          setTimeout(()=>{
            fengMap.moveTo(pnt);
          },200)
        }

        if (that.isGroupClick) {
          that.showFengGroupMap();
        }
        if (that.isUnitMap) {
          that.initUnitMap();
        }
        that.fullLoading.close();
      });

      //地图点击事件
      fengMap.on("mapClickNode", function(event) {
        if (!that.isStartMark) {
          return;
        }
        if (event.target && event.target.groupID) {
          that.fengMapObj.indoorId = event.target.groupID;
        }
        if (!that.fengMapObj.indoorId) {
          that.$message({
            message: "请标注到具体楼层上",
            type: "warning"
          });
          return;
        }

        that.clearLastMark();

        //获取坐标信息
        let eventInfo = event.eventInfo.coord;
        eventInfo.icon = that.currentMark.icon;
        eventInfo.name = that.currentMark.name;
        /* eventInfo.z =
          fengMap.getFMGroup(that.fengMapObj.indoorId)
            .groupHeight + fengMap.layerLocalHeight; */
        eventInfo.z = event.target.currHeight + fengMap.layerLocalHeight;
        that.addMarker(eventInfo);
      });
    },
    /**
     * 释放地图
     * */
    disposeMap() {
      //释放地图
      if (fengMap !== null) {
        //释放地图资源
        fengMap.dispose && fengMap.dispose();
        //重置地图对象
        fengMap = null;
        // console.log("地图已释放！");
      }
    },
    showhideMarks: function(falg) {
      let self = this;
      if(!falg){
        this.showDeviceNameFlag=false
      }
      self.cleanAllMark();
      self.showAllMark();
    },
    //获取标注点
    showMarker: function() {
      let self = this;
      getMarkers({
        organizationId: self.indoorOrg.organizationId,
        indoorId: self.fengMapObj.indoorId
          ? self.fengMapObj.indoorId
          : self.isUnitMap
          ? ""
          : 0, //self.fengMapObj.indoorId,
        indoorMapId: self.fengMapObj.data.id,
        type: 0,
        queryType: 0
      }).then(data => {
        if (data.status == 200) {
          if (data.data) {
            let newArr = [];
            for (let i = 0; i < data.data.length; i++) {
              let re = JSON.parse(data.data[i].mapLocation);
              let obj = {};

              obj.id = data.data[i].id;
              obj.x = re[0].x;
              obj.y = re[0].y;
              obj.z = re[0].z;
              obj.name = data.data[i].name;
              obj.type = data.data[i].type;
              obj.indoorId = data.data[i].indoorId;
              obj.indoorMapId = data.data[i].indoorMapId;
              for (let j in self.fengMapObj.code57) {
                if (self.fengMapObj.code57[j].id == data.data[i].type) {
                  obj.icon = self.fengMapObj.code57[j].icon;
                }
              }
              newArr.push(obj);
            }
            self.markAllData = newArr;
            self.showAllMark();
          }
        }
      });
    },
    //展示标注点
    showAllMark() {
      let self = this;
      if (!self.showMarksFlag || self.markAllData.length == 0) return;
      self.fullLoading = this.$loading({
        lock: true,
        text: "展示标注点...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      for (let i = 0; i < self.markAllData.length; i++) {
        self.addAllMarker(self.markAllData[i]);
      }
      setTimeout(() => {
        if (self.fullLoading.visible) {
          self.fullLoading.close();
        }
      }, 100);
    },
    showAllTextMark() {
      let self = this;
      if (!self.showMarksFlag || self.markAllData.length == 0) return;
      self.fullLoading = this.$loading({
        lock: true,
        text: "展示标注点...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      for (let i = 0; i < self.markAllData.length; i++) {
        self.addAllTextMarker(self.markAllData[i]);
      }
      setTimeout(() => {
        if (self.fullLoading.visible) {
          self.fullLoading.close();
        }
      }, 100);
    },
    changeMarkType(id, icon, dictKey, name) {
      let self = this;

      this.$message({
        message: "开启标点",
        type: "success"
      });
      self.currentMark.modelId = id;
      self.currentMark.id = id;
      self.currentMark.name = "";
      self.currentMark.icon = icon;
      self.currentMark.type = dictKey;
      self.isStartMark = true;
      // 重置关联对象
      self.relateEq.value = "";
      if (self.currentMark.id != 2) {
        // 重新获取关联对象
        self.getFcfSelectList();
      } else {
        // 获取关联建筑物
        self.getRelateBuildList();
      }
    },
    //单个打点
    addMarker(info) {
      let self = this;
      //添加文字标注前需要先获取指定楼层
      let groupLayer = fengMap.getFMGroup(self.fengMapObj.indoorId * 1);
      //创建图片标注层并添加到指定楼层上面。
      // self.firstLayer
      let layer = new fengmap.FMImageMarkerLayer();
      groupLayer.addLayer(layer);
      //图标标注对象，默认位置为该楼层中心点
      let im = new fengmap.FMImageMarker({
        url: info.icon, //设置图片路径
        x: info.x,
        y: info.y,
        z: info.z,
        id: info.id,
        name: info.name,
        size: self.imgSizeRate, //设置图片显示尺寸
        height: 2.5, //设置图片标注的高度
        callback: function() {
          // 在图片载入完成后，设置 "一直可见"，不被其他层遮挡
          im.alwaysShow();
        }
      });
      layer.addMarker(im);
      self.markerLayer.push(layer);
      self.currentMark.readyData = im;
      this.addAllTextMarker(info,'markerLayer')
    },
    //自定义标注
    addAllMarker(info) {
      let self = this;
      //添加文字标注前需要先获取指定楼层
      // let groupLayer = fengMap.getFMGroup(self.fengMapObj.indoorId*1||info.indoorId);
      //创建图片标注层并添加到指定楼层上面。
      // self.firstAllLayer =
      let layer = new fengmap.FMImageMarkerLayer(); //实例化ImageMarkerLayer
      fengMap
        .getFMGroup(self.fengMapObj.indoorId * 1 || info.indoorId)
        .addLayer(layer); //添加图片标注层到模型层。否则地图上不会显示
      //图标标注对象，默认位置为该楼层中心点
      let im = new fengmap.FMImageMarker({
        url: info.icon, //设置图片路径
        x: info.x,
        y: info.y,
        z: info.z,
        id: info.id,
        name: info.name,
        size: self.imgSizeRate, //设置图片显示尺寸
        height: 2.5, //设置图片标注的高度
        anchor:fengmap.FMMarkerAnchor.RIGHT,
        callback: function() {
          // 在图片载入完成后，设置 "一直可见"，不被其他层遮挡
          im.alwaysShow();
        }
      });
      layer.addMarker(im);
      layer.bizId = info.id
      self.markerAllLayer.push(layer);
      this.addAllTextMarker(info)
      // self.saveAllMark.push(im);
    },
    // 文本标注
    addAllTextMarker(info,key='markerAllLayer'){
      if(!this.showDeviceNameFlag) return
      let layer = new fengmap.FMTextMarkerLayer(); //实例化ImageMarkerLayer
      fengMap
        .getFMGroup(this.fengMapObj.indoorId * 1 || info.indoorId)
        .addLayer(layer); //添加图片标注层到模型层。否则地图上不会显示
      //图标标注对象，默认位置为该楼层中心点
      let tm = new fengmap.FMTextMarker({
        x: info.x,
        y: info.y,
        z: info.z,
        name: info.name,
        id: info.id,
        height: 2.5,
        fillcolor:'255,0,0',
        strokecolor:'255,255,0',
        anchor:fengmap.FMMarkerAnchor.LEFT,
        fontsize:14,
      });
      layer.addMarker(tm);
      layer.markerType = 'deviceName'
      this[key].push(layer);
    },
    //定位
    fixPosition(value) {
      let self = this;
      //中心点
      var pnt = {
        x: value.x,
        y: value.y,
        time: 1,
        groupID: (value.indoorId || self.fengMapObj.indoorId )* 1, //目标层GroupID
       /*  callback: function() {
          //跳转中心点完成
        } */
      };
      //跳转
      fengMap.moveTo(pnt);
      fengMap.mapScale = 400;
      fengMap.mapScaleLevel = 18;
      // 点跳动
      if (self.markerAllLayer.length>0) {
        try {
          self.markerAllLayer.forEach(function(layer, index) {
            if (layer && layer.bizId === value.id) {
              try {
                layer.markers[0].jump({
                  height: 20,	//number	图标跳动的高度。
                  times: 2,//number	图标跳动次数。不设置该参数或设置为0时, 一直跳动。
                  duration: 2, //	number	单次跳动动画的持续时长（秒）。
                  delay: 0.5	//number	 一次跳动完成到下次跳动开始的等待时长（秒）。
                })
              } catch (e) {}
            }
          });
        } catch (e) {}
      }
    },
    //删除
    deleteMark(value) {
      let self = this;
      // 阻止事件冒泡
      event.stopPropagation();
      if (value) {
        this.$confirm("确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          roundButton: true
        })
          .then(() => {
            delMarkers({ id: value.id }).then(data => {
              self.cleanAllMark();
              //获取标注点数据
              self.showMarker();
              self.$message({
                message: "删除成功",
                type: "success"
              });
            });
            // 阻止事件冒泡
            event.stopPropagation();
          })
          .catch(() => {});
      }
    },
    //保存打点
    quitSaveIndoorMark() {
      let self = this;
      //室内地图结构
      if (!self.fengMapObj.indoorId) {
        self.$message({
          message: "未初始化室内地图",
          type: "warning"
        });
        return;
      }
      //标注点type
      if (!(self.isStartMark && self.currentMark.readyData)) {
        self.$message({
          message: "未开启标点",
          type: "warning"
        });
        return;
      }
      if (self.currentMark.name.trim() == "") {
        self.$message({
          message: "请输入标注名称",
          type: "warning"
        });
        return;
      }
      let mapLocationArr = {
        x: self.currentMark.readyData._x,
        y: self.currentMark.readyData._y,
        z: self.currentMark.readyData._z,
        height: 2.5,
        indoorId: self.fengMapObj.indoorId
      };
      let param = {
        orgId: self.indoorOrg.organizationId,
        buildId: self.fengMapObj.build,
        type: self.currentMark.id,
        indoorMapId: self.fengMapObj.data.id,
        indoorId: self.fengMapObj.indoorId,
        name: self.currentMark.name,
        bizId: self.relateEq.value ? self.relateEq.value.toString() : "", //消防设施
        typeGroup: Number(self.currentMark.type),
        mapLocation: JSON.stringify([mapLocationArr])
      };
      //vr
      if (self.currentMark.id == 30) {
        param.remark = param.bizId;
        param.bizId = "";
      } else if (self.currentMark.id == 2) {
        // 建筑物
        param.bizId = self.relateBuildId || "";
      }
      updateMarkers(param).then(res => {
        self.clearLastMark();
        if (res.status === 200) {
          self.$message({
            message: "标注成功",
            type: "success"
          });
          self.currentMark.name = "";
          self.relateEq.value = "";
          self.markAllData = [];

          self.cleanAllMark();
          //获取标注点数据
          self.showMarker();
        } else if (res.status === 120008) {
          // 关联对象已标注
          self.$message({
            message: res.info,
            type: "warning"
          });
        }
      });
    },
    //清除所有标注点
    cleanAllMark() {
      let self = this;
      if (self.markerAllLayer) {
        try {
          self.markerAllLayer.forEach(function(layer, index) {
            if (layer) {
              try {
                layer.removeAll();
              } catch (e) {}
            }
          });
          self.markerAllLayer=[]
        } catch (e) {}
      }
      self.clearLastMark();
      this.cleanAllTextMark()
    },
    //清除本地打点
    clearLastMark() {
      let self = this;
      if (self.markerLayer) {
        try {
          self.markerLayer.forEach(function(layer, index) {
            if (layer) {
              try {
                layer.removeAll();
              } catch (e) {}
            }
          });
          self.markerLayer=[]
        } catch (e) {}
      }
    },
    // 清除设备名称
    cleanAllTextMark() {
      let self = this;
      if (self.markerAllLayer&&self.markerAllLayer.length>0) {
        self.markerAllLayer.filter(n=>{ return n.markerType=='deviceName' }).forEach(layer=>{
          if (layer) {
            try {
              layer.removeAll();
            } catch (e) {}
          }
        })
      }
      self.clearLastTextMark();
    },
    //清除本地设备名称
    clearLastTextMark() {
      let self = this;
      if (self.markerLayer&&self.markerLayer.length>0) {
        self.markerLayer.filter(n=>{ return n.markerType=='deviceName' }).forEach(layer=>{
          if (layer) {
            try {
              layer.removeAll();
            } catch (e) {}
          }
        })
      }
    }
  }
};
</script>

<style lang="less">
.indoorMark-container {
  .layeredGraph-title {
    font-weight: bold;
    padding: 10px;
    background-color: #f7f7f7;
    &.is-required::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
    &.is-flex{
      display: flex;
      align-items: center;
      span{
        font-weight: normal;
      }
    }
  }
  .el-form-item__content {
    width: 100%;
    margin-left: auto !important;
  }
  .indoor-map,
  .relate-eq {
    border: 1px solid rgba(238, 238, 238, 0.9);
    border-top: none;
  }
  .relate-eq {
    overflow: auto;
  }
  .mark-tool {
    width: 100%;
  }
}
</style>
